<template>
  <div class="page" style="padding-bottom: 0;background-color: #ffffff">
    <Navbar showBack showNavbar :title="title"/>
    <view class="rental-list">
      <!-- Search Bar -->
      <view class="search-bar">
        <u-search disabled @click="handleSearchPage" placeholder="搜索楼盘/名称" v-model="keyword" :show-action="false"></u-search>
      </view>
      <!-- Filter Options -->
      <div style="background-color: #fff">
        <u-dropdown>
          <!--      区域、租金、方式、更多、排序-->
          <u-dropdown-item :title="filters.area || '区域'" :options="areaOptions" v-model="filters.area" @change="handleFilterChange"></u-dropdown-item>
          <u-dropdown-item :title="formattedPrice || '价格'" :options="rentOptions" v-model="filters.price" @change="handleFilterChange"></u-dropdown-item>
          <u-dropdown-item :title="formattedSize || '面积'" :options="sizeOptions" v-model="filters.size" @change="handleFilterChange"></u-dropdown-item>
<!--          <u-dropdown-item title="排序" :options="sortOptions" v-model="filters.sort" @change="handleFilterChange"></u-dropdown-item>-->
        </u-dropdown>
      </div>
      <div style="flex-grow: 1;overflow:hidden;background-color: #F5F5F5">
        <scroll-view
            scroll-y="true"
            @scrolltolower="onScroll"
            refresher-enabled
            :refresher-triggered="isRefreshing"
            @refresherrefresh="onRefresh"
            style="height: 100%"
        >
          <ItemDetail :item="item" v-for="(item, index) in dataList" :key="index" ></ItemDetail>
          <u-loadmore v-if="dataList.length" :status="loading" />
          <div style="height: 40px"></div>
          <u-empty  v-if="dataList.length === 0" mode="list"></u-empty>
        </scroll-view>
      </div>
    </view>
  </div>
</template>

<script>
import Navbar from "../../components/navbar.vue";
import ItemDetail from "./itemDetail.vue";
export default {
  components: {Navbar, ItemDetail},
  data() {
    return {
      title: '写字楼列表',
      template_id: '',
      keyword: '',
      filters: {
        area: '',
        price: '',
        size: '',
        sort: 0
      },
      areaOptions: [
        { label: '不限', value: '' },
        { label: '市南区', value: '市南区' },
        { label: '市北区', value: '市北区' },
        { label: '李沧区', value: '李沧区' },
        { label: '崂山区', value: '崂山区' },
        { label: '黄岛区', value: '黄岛区' },
        { label: '城阳区', value: '城阳区' }
      ],
      rentOptions: [
        { label: '不限', value: '' },
        { label: '1万元/月以下', value: '<10000' },
        { label: '1-3万元/月', value: '10000-30000' },
        { label: '3-5万元/月', value: '30000-50000' },
        { label: '5-10万元/月', value: '50000-100000' },
        { label: '10万元/月以上', value: '>100000' },
      ],
      sizeOptions: [
        { label: '不限', value: '' },
        { label: '50㎡以下', value: '<50' },
        { label: '50-100㎡', value: '50-100' },
        { label: '100-150㎡', value: '100-150' },
        { label: '150-200㎡', value: '150-200' },
        { label: '200-300㎡', value: '200-300' },
        { label: '300-500㎡', value: '300-500' },
        { label: '500㎡以上', value: '>500' },
      ],
      sortOptions: [
        { label: '默认排序', value: 0 },
        { label: '价格从低到高', value: 1 },
        { label: '价格从高到低', value: 2 },
        { label: '面积从小到大', value: 3 },
        { label: '面积从大到小', value: 4 }
      ],
      dataList: [

      ],
      loading: 'loading',
      pageNo: 1,
      total: 0,
      isRefreshing: false,
    }
  },
  onLoad({ template_id, template_name }) {
    this.getList(true)
    if (template_name && template_id) {
      this.title = template_name
      this.template_id = template_id
    }
  },
  computed: {
    formattedPrice() {
      if (!this.filters.price) return ''
      let find = this.rentOptions.find(item => item.value === this.filters.price)
      if (find) {
        return find.label
      }
      return this.filters.price
    },
    formattedSize() {
      if (!this.filters.size) return ''
      let find = this.sizeOptions.find(item => item.value === this.filters.size)
      if (find) {
        return find.label
      }
      return this.filters.size
    },
  },
  methods: {
    handleSearchPage() {
      uni.navigateTo({
        url: '/pages/house/search'
      })
    },
    handleFilterChange() {
      this.getList(true)
    },
    async getList(reset = false) {
      if (reset) {
        this.pageNo = 1
        this.dataList = []
      } else {
        if (this.loading === 'nomore') return
      }
      this.loading = 'loading'
      try {
        uni.showLoading({
          title: '加载中...'
        })
        console.log(this.filters)
        const params = {
          pageNum: this.pageNo,
          pageSize: 10,
          keyword: this.keyword,
          template_id: this.template_id,
          district_label: this.filters.area,
          price: this.filters.price,
          area: this.filters.size,
          // sort: this.filters.sort
        }
        const res = await this.$api.getOfficeBuildingPage(params)
        let { rows, count } = res
        this.total = count || 0
        if (reset) {
          this.dataList = rows || []
        } else {
          this.dataList = [...this.dataList, ...(rows || [])]
        }

        this.pageNo++
        this.loading = (rows || []).length >= this.total ? 'nomore' : 'loadmore'
        uni.hideLoading()
      } catch (e) {
        console.log(e)
        this.loading = 'loadmore'
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      }
    },
    // 下拉刷新
    async onRefresh() {
      if (this.isRefreshing) return
      this.isRefreshing = true

      try {
        await this.getList(true)
        uni.showToast({
          title: '刷新成功',
          icon: 'none'
        })
      } catch (e) {
        uni.showToast({
          title: '刷新失败',
          icon: 'none'
        })
      } finally {
        this.isRefreshing = false
      }
    },

    // 上拉加载更多
    onScroll() {
      if (this.loading === 'loading') return
      this.getList()
    },
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.getList()
  },
  // 分享
  onShareAppMessage() {
    return {
      title: '钛星企服',
      path: '/pages/home/index'
    }
  }
}
</script>

<style lang="scss" scoped>
.rental-list {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .search-bar {
    margin:24rpx;
  }
  .property-list {
    background-color: #F5F5F5;
    padding: 24rpx;
    .property-item {
      display: flex;
      margin-bottom: 20rpx;
      padding-bottom: 20rpx;
      border-bottom: 1px solid #eee;

      .property-image {
        width: 200rpx;
        height: 150rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
      }

      .property-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
          font-size: 28rpx;
          font-weight: bold;
        }

        .specs {
          font-size: 24rpx;
          color: #666;
        }

        .price {
          font-size: 28rpx;
          color: #f56c6c;
        }
      }
    }
  }


  .view-all {
    text-align: center;
    padding: 20rpx;
    color: #666;
    font-size: 28rpx;
  }

  .house-item {
    background-color: #FFFFFF;
    border-radius: 12rpx;
    padding: 24rpx;
    margin: 24rpx;
    display: flex;
  }

  .house-image {
    width: 240rpx;
    height: 180rpx;
    border-radius: 12rpx;
    margin-right: 32rpx;
    flex-shrink: 0;
  }

  .house-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .house-title {
    font-size: 32rpx;
    color: #333333;
    font-weight: bold;
    margin-bottom: 12rpx;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .house-detail {
    display: flex;
    align-items: center;
    margin-bottom: 12rpx;
  }

  .location, .area, .type {
    font-size: 14px;
    color: #666666;
  }
  .line {
    height: 20rpx;
    width: 2rpx;
    background-color: #DCDCDC;
    margin: 0 24rpx;
  }
  .house-price {
    display: flex;
    align-items: baseline;
  }

  .price {
    font-size: 20px;
    color: #FF6B6B;
    font-weight: bold;
  }

  .unit {
    font-size: 14px;
    color: #FF6B6B;
    margin-left: 4rpx;
  }

  .unit-price {
    font-size: 14px;
    color: #999999;
  }
}

/* 添加下拉菜单样式 */
.u-dropdown {
  background-color: #fff;
}
.u-dropdown__menu {
  height: 80rpx;
  line-height: 80rpx;
}
.u-dropdown__menu__item {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #333;
}
.u-dropdown__menu__item__text {
  font-size: 28rpx;
  color: #333;
}
.u-dropdown-item__options {
  background-color: #fff;
}
.u-dropdown-item__options__item {
  padding: 24rpx;
  font-size: 28rpx;
  color: #333;
  text-align: center;
}
.u-dropdown-item__options__item--active {
  color: #2979ff;
}
</style>
